<template>
  <div class="rank">
    <div v-if="loadingFlag" class="loading">
      <van-loading color="#ffcd32" text-color="#ffcd32" text-size="12px">
        请稍等,正在加载中.....
      </van-loading>
    </div>
    <ul class="rank-list" v-else>
      <li class="list-item" v-for="item in rankList" :key="item.id">
        <div class="item">
          <div class="left"><img alt="" v-lazy="item.picUrl" /></div>
          <div class="right">
            <ul class="right-item">
              <li
                v-for="(ele, index) in item.songList"
                :key="index"
                class="item-one"
              >
                <div>
                  {{ index + 1 }}.{{ ele.songname }}--{{ ele.singername }}
                </div>
              </li>
            </ul>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
import { gettopRank } from "@axios/service";

export default {
  data() {
    return {
      rankList: [],
      loadingFlag: true,
    };
  },
  created() {
    gettopRank().then((res) => {
      var { code, data } = res;
      if (code) return false;
      this.rankList = data.topList;
      this.loadingFlag = false;
    });
  },
};
</script>
<style lang="less" scoped>
@import "@styles/index.less";
.loading {
  position: absolute;
  .top(0);
  left: 0;
  right: 0;
  bottom: 0;
  background: @bgcolor;
  z-index: 3;
  text-align: center;
  .lh(667);
}
.rank {
  .padding(20,0,0,0);
  .wh(375,559);
  background: @bgcolor;
  .rank-list {
    .h(559);
    overflow: scroll;
    .padding(0,20,0,20);
    .list-item {
      background: @bg3;
      .item {
        display: flex;
        .h(100);
        .margin(0,0,20,0);
        background: @bg3;
        .left {
          .wh(100,100);
          img {
            width: 100%;
            height: 100%;
          }
        }
        .right {
          flex: 1;
          .right-item {
            display: flex;
            .h(84);
            .padding(8,20,8,20);
            flex-direction: column;
            justify-content: space-around;
            .item-one {
              div {
                .wh(195,15);
                .fs(8);
                color: hsla(0, 0%, 100%, 0.3);
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              }
            }
          }
        }
      }
    }
  }
}
</style>
